import { ImagePicker, Button, Flex, WhiteSpace, Toast, Modal, List, WingBlank } from 'antd-mobile';
import { Setting } from './Setting';
import { createForm } from 'rc-form';

class LoginT extends React.Component {

  constructor(props) {
      super(props);

      let idx = this.props.site.findIndex(x => x.name === 'image.spec');
      
      this.state = {
        content: idx >= 0 ? this.props.site[idx].content : '',
        zjz: props.record.zjz,
        sfz: props.record.sfz,
        modal: false,
      };
  }

  onChange1 = (files, type, index) => {
    console.log("type=" + type);

    if (type === 'remove') {
      this.setState({zjz: ''});
    }else{

      Toast.loading("正在上传证件照");

      const _this = this;
      const form = new FormData();
      form.append('photo', files[0].file)

      fetch( Setting.BaseUrl + 'zjz' , {
        method: 'POST',
        body: form
      }).then( function( resp ){
        return resp.json();
      }).then( function( json ){
        Toast.hide();
        if( json.success ){
          _this.setState({
            zjz: json.file.image_url
          });
        }else{
          Toast.offline( json.error , 2 );
        }
      })
    }
  }

  onChange2 = (files, type, index) => {
    console.log("type=" + type);

    if (type === 'remove') {
      this.setState({ sfz: '' });
    } else {
      Toast.loading("正在上传身份证扫描件");

      const _this = this;
      const form = new FormData();
      form.append('photo', files[0].file)

      fetch(Setting.BaseUrl + 'sfzjz', {
        method: 'POST',
        body: form
      }).then(function (resp) {
        return resp.json();
      }).then(function (json) {
        Toast.hide();

        if (json.success) {
          _this.setState({
            sfz: json.file.image_url,
            sfzResult: json.sfz,
            modal: true,
          });
        } else {
          Toast.offline(json.error, 2);
        }
      })
    }
  }

  onSfzClick = () => {
    if (this.state.sfzResult) {
      this.setState({modal: true});
    }
  }

  render() {
    const { files } = this.state;
    const title = this.props.title;
    const name = this.props.nodeName;
    return (
      <div className={name}>
        <h2 className="step-title">{title}</h2>

        <input type="hidden" value={this.state.zjz} name='zjz' />
        <input type="hidden" value={this.state.sfz} name='sfz' />
        
        <Flex justify="center">
          <Flex.Item>
            <Flex justify="center" direction="column">
              <ImagePicker
                files={this.state.zjz ? [{url: this.state.zjz}] : []}
                onChange={this.onChange1}
                selectable={! this.state.zjz}
              />
              <div>证件照</div>
            </Flex>
            
          </Flex.Item>
          {/* <Flex.Item>
            <Flex justify="center" direction="column">
              <ImagePicker
                files={this.state.sfz ? [{url: this.state.sfz}] : []}
                onChange={this.onChange2}
                selectable={! this.state.sfz}
                onImageClick={this.onSfzClick}
              />
              <div>身份证正面照片</div>
            </Flex>
          </Flex.Item> */}
        </Flex>
        <ul dangerouslySetInnerHTML={{__html: this.state.content}}>
        </ul>
        {this.state.sfzResult && this.state.modal ? (

            <Modal
              popup
              visible={this.state.modal}
              onClose={() => this.setState({ modal: false })}
              animationType="fade"
              className="sfz-modal"
            >
              <List renderHeader={() => <div>身份证已识别</div>} className="popup-list">
                <List.Item extra={this.state.sfzResult.idcard}>身份证</List.Item>
                <List.Item extra={this.state.sfzResult.name}>姓名</List.Item>
                <List.Item extra={this.state.sfzResult.year}>出生年月</List.Item>
                <List.Item extra={this.state.sfzResult.sex}>性别</List.Item>
                <List.Item extra={this.state.sfzResult.mz}>民族</List.Item>
                <List.Item>
                  <Button type="primary" onClick={() => this.setState({ modal: false })}>确定</Button>
                </List.Item>
              </List>
            </Modal>
        ) : null}
      </div>
    );
  }

}

const Step2 = createForm()(LoginT);

export default Step2